<!DOCTYPE html>
<html lang="en" style="width: 99vw">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/vue.min.js"></script>
    <script src="/elementUI/index.js"></script>
    <link rel="stylesheet" href="/elementUI/index.css">
    <script src="/js/axios.min.js"></script>
    <style type="text/css">
    body {
        scroll:"no";
        scroll:"auto";
        overflow-x:hidden;
        overflow-y:hidden;
    }
    html {
        scroll:"no";
        scroll:"auto";
        overflow-x:hidden;
        overflow-y:hidden;
    }
</style>



</head>

<body scroll="no">
    <div id="app" >
        <el-row :gutter="20">
        <el-breadcrumb style="font-size: 30px;margin-left: 10px">
            <el-breadcrumb-item>产品列表</el-breadcrumb-item>
        </el-breadcrumb>
        </el-row>
        <el-divider></el-divider>
        产品名称:
        <div style="width:300px;display: inline-block">

            <el-input placeholder="请输入内容" v-model="productName" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="selectLike"></el-button>
            </el-input>

        </div>
        &nbsp;
        <div style="float: right">
            <el-button type="primary" @click="dialogAddFormVisible = true">添加产品</el-button>
            <el-button type="warning" @click="deleteIds">批量删除</el-button>
        </div>
        <br>

        <br><br>

        <el-row :gutter="20">
        <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="id" label="id">
            </el-table-column>
            <el-table-column prop="productNum" label="产品编号">
            </el-table-column>
            <el-table-column prop="productName" label="产品名称">
            </el-table-column>
            <el-table-column prop="cityName" label="出发城市">
            </el-table-column>
            <el-table-column prop="departureTimeStr" label="出发时间">
            </el-table-column>
            <el-table-column prop="productPrice" label="产品价格">
            </el-table-column>
            <el-table-column prop="productStatusStr" label="状态">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text"  icon="el-icon-view" title="查看详情"></el-button>
            <el-button  @click="handleEdit(scope.row)" type="text"  icon="el-icon-edit" title="修改产品信息"></el-button>
            <el-button  @click="handleDelete(scope.row)" type="text"  icon="el-icon-delete" title="删除产品"></el-button>

                </template>
            </el-table-column>
          </template>
        </el-table>
        <div class="block" style="width: 100vw;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count" style="width: 100%;">
            </el-pagination>
        </div>
        </el-row>
<!--        <div style="margin-top: 20px">-->
<!--            <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>-->
<!--            <el-button @click="toggleSelection()">取消选择</el-button>-->
<!--        </div>-->
        <el-dialog title="产品详情" :visible.sync="dialogFormVisible" width="615px">
            <el-form :model="descFrom" label-position="left" model="{
                name: '',
                region: '',
                type: ''
            }" :inline="true">

                <el-form-item label="产品编号">
                    <el-input v-model="descFrom.productNum" disabled></el-input>
                </el-form-item>
                <el-form-item label="产品名称">
                    <el-input v-model="descFrom.productName" disabled></el-input>
                </el-form-item>
                <el-form-item label="出发城市">
                    <el-input v-model="descFrom.cityName" disabled></el-input>
                </el-form-item>
                <el-form-item label="出发时间">
                    <el-input v-model="descFrom.departureTimeStr" disabled></el-input>
                </el-form-item>
                <el-form-item label="产品价格">
                    <el-input v-model="descFrom.productPrice" disabled></el-input>
                </el-form-item>

                <el-form-item label="产品状态">
                    <el-input v-model="descFrom.productStatusStr" disabled></el-input>
                </el-form-item>
                <el-form-item label="产品描述">
                    <el-input type="textarea" v-model="descFrom.productDesc" disabled style="width: 570px;"></el-input>
                </el-form-item>
            </el-form>
<!--            <div slot="footer" class="dialog-footer">-->
<!--                <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>-->
<!--            </div>-->
        </el-dialog>

        <el-dialog title="产品修改" :visible.sync="dialogEditFormVisible" width="615px" :before-close="handleClose">
            <el-form :model="editFrom" label-position="left" model="{
                name: '',
                region: '',
                type: ''
            }" :inline="true" >

                <el-form-item label="产品编号">
                    <el-input v-model="editFrom.productNum" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="产品名称">
                    <el-input v-model="editFrom.productName" style="width: 200px;"></el-input>
                </el-form-item>

                <el-form-item label="出发时间">
<!--                    <el-input v-model="editFrom.departureTime" ></el-input>-->
                    <el-date-picker style="width: 200px;"
                            v-model="editFrom.departureTime"
                            type="datetime"
                            format="yyyy-MM-dd HH:mm"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>


                <el-form-item label="出发城市">
                    <el-input v-model="editFrom.cityName" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="产品状态">
<!--                    <el-input v-model="editFrom.productStatusStr" style="width: 200px;"></el-input>-->

                    <el-select v-model="editFrom.productStatus"   style="width: 200px;">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="产品价格">
                    <el-input v-model="editFrom.productPrice" style="width: 200px;"></el-input>
                </el-form-item>
                <el-form-item label="产品描述">
                    <el-input type="textarea" v-model="editFrom.productDesc"  style="width: 560px;"></el-input>
                </el-form-item>
            </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="getData(obj)">取 消</el-button>
                            <el-button type="primary" @click="editProduct">确 定</el-button>
                        </div>
        </el-dialog>
        <el-dialog title="产品添加" :visible.sync="dialogAddFormVisible" width="615px" :before-close="handleClose">
            <el-form :model="addFrom" label-position="left" model="{
                name: '',
                region: '',
                type: ''
            }" :inline="true" >

                <el-form-item label="产品编号">
                    <el-input v-model="addFrom.productNum" style="width: 200px;" placeholder="请输入产品编号"></el-input>
                </el-form-item>
                <el-form-item label="产品名称">
                    <el-input v-model="addFrom.productName" style="width: 200px;" placeholder="请输入产品名称"></el-input>
                </el-form-item>

                <el-form-item label="出发时间">
                    <!--                    <el-input v-model="editFrom.departureTime" ></el-input>-->
                    <el-date-picker style="width: 200px;"
                                    v-model="addFrom.departureTime"
                                    type="datetime"
                                    format="yyyy-MM-dd HH:mm"
                                    placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>


                <el-form-item label="出发城市">
                    <el-input v-model="addFrom.cityName" style="width: 200px;" placeholder="请输入出发城市"></el-input>
                </el-form-item>
                <el-form-item label="产品状态">
                    <!--                    <el-input v-model="editFrom.productStatusStr" style="width: 200px;"></el-input>-->

                    <el-select v-model="addFrom.productStatus"   style="width: 200px;">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="产品价格">
                    <el-input v-model="addFrom.productPrice" style="width: 200px;" placeholder="请输入产品价格"></el-input>
                </el-form-item>
                <el-form-item label="产品描述">
                    <el-input type="addFrom" v-model="addFrom.productDesc"  style="width: 560px;" placeholder="请输入产品描述"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="getData(obj)">取 消</el-button>
                <el-button type="primary" @click="addProduct">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</body>
<script>
    var obj = {
        page: 1,
        limit: 5,
        productName:""
    }
    var v1 = new Vue({
        el: "#app",
        data: {
            tableData: [],
            productName:"",
            count: 100,
            currentPage: 1,
            pageSize: 5,
            multipleSelection: [],
            dialogFormVisible: false,
            dialogEditFormVisible:false,
            dialogAddFormVisible:false,
            options: [{
                value: 0,
                label: '关闭'
            }, {
                value: 1,
                label: '开启'
            }],
            descFrom:{
                id:1,
                productNum:"产品编号",
                productName:"产品名称",
                cityName:"出发城市",
                departureTimeStr:"出发时间",
                productPrice:"产品价格",
                productDesc:"产品描述",
                productStatusStr:"状态"
             },
            editFrom:{
                id:1,
                productNum:"产品编号",
                productName:"产品名称",
                cityName:"出发城市",
                departureTimeStr:"出发时间",
                departureTime:"",
                productPrice:"产品价格",
                productDesc:"产品描述",
                productStatusStr:"状态",
                productStatus:0
            },
            addFrom:{
                productNum:"",
                productName:"",
                cityName:"",
                departureTime:new Date(),
                productPrice:"",
                productDesc:"",
                productStatus:0
            }

        },
        methods: {
            // 切换分页调用方法
            handleSizeChange(val) {
                //获取切换后的分页数val 
                //切换分页后应该从第一页开始查询
                // 向后台发送请求获取新的数据
                this.currentPage = 1;
                this.pageSize = val;

                console.log({
                    "当前页码": this.currentPage,
                    "当前分页数": this.pageSize
                });
                obj.page=this.currentPage;
                obj.limit=this.pageSize;
                obj.productName=this.productName;
                axios({
                    // 请求方式
                    method: 'get',
                    url: '/product/json',
                    // 传递参数 data使用流发送数据 params台servlet可以直接获取
                    params: obj,
                    //响应的数据格式 默认就是json 可以省略
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    let res = response.data;
                    console.log(res);
                    v1.tableData=res.list;
                    v1.count=res.total;

                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                    // 一般不用
                });
            },
            // 当跳转指定页面时调用的方法
            handleCurrentChange(val) {
                //获取跳转的页码val
                //获取当前分页数this.pageSize
                // 向后台发送请求获取新的数据
                this.currentPage = val;
                console.log({
                    "当前页码": this.currentPage,
                    "当前分页数": this.pageSize
                });
                obj.page=this.currentPage;
                obj.limit=this.pageSize;
                obj.productName=this.productName;
                axios({
                    // 请求方式
                    method: 'get',
                    url: '/product/json',
                    // 传递参数 data使用流发送数据 params台servlet可以直接获取
                    params: obj,
                    //响应的数据格式 默认就是json 可以省略
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    let res = response.data;
                    console.log(res);
                    v1.tableData=res.list;
                    v1.count=res.total;

                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                    // 一般不用
                });
            },
            handleClick(row) {
                console.log(row);
                //修改数据为当前行
                v1.descFrom=row

                v1.dialogFormVisible=true;
            },
            // toggleSelection(rows) {
            //     if (rows) {
            //         rows.forEach(row => {
            //             this.$refs.multipleTable.toggleRowSelection(row);
            //         });
            //     } else {
            //         this.$refs.multipleTable.clearSelection();
            //     }
            // },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleEdit( row) {
                console.log( row);
                //修改数据为当前行
                v1.editFrom=row;
                v1.dialogEditFormVisible=true;
            },
            handleDelete(row) {

                v1.$confirm('此操作将永久删除该产品:'+row.productName+', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        // 请求方式
                        method: 'get',
                        url: '/product/deleteJson',
                        // 传递参数 data使用流发送数据 params台servlet可以直接获取
                        params: {id:row.id},
                        //响应的数据格式 默认就是json 可以省略
                        responseType: 'json'
                    }).then(response => {
                        // 请求成功
                        let res = response.data;
                        v1.tableData=res.list;
                        v1.count=res.total;
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(error => {
                        // 请求失败，
                        console.log(error);
                        // 一般不用
                        this.$message({
                            type: 'info',
                            message: '删除失败'
                        });
                    });
                }).catch(() => {

                });
            },
            editProduct(){

                axios({
                    // 请求方式
                    method: 'post',
                    url: '/product/editJson',
                    // 传递参数 data使用流发送数据 params台servlet可以直接获取
                    data: v1.editFrom,
                    //响应的数据格式 默认就是json 可以省略
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    let res = response.data;
                    v1.tableData=res.list;
                    v1.count=res.total;

                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                    // 一般不用
                });
                v1.currentPage=1;
                v1.pageSize=5;

                v1.dialogEditFormVisible=false;
            },
            handleClose(done) {
                getData(obj);
            },
            addProduct(){
                axios({
                    // 请求方式
                    method: 'post',
                    url: '/product/addJson',
                    // 传递参数 data使用流发送数据 params台servlet可以直接获取
                    data: v1.addFrom,
                    //响应的数据格式 默认就是json 可以省略
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    let res = response.data;
                    v1.tableData=res.list;
                    v1.count=res.total;

                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                    // 一般不用
                });
                v1.dialogAddFormVisible=false;
            },
            deleteIds(){
                var ids = new Array();
              for(var i in v1.multipleSelection){
                   // console.log(i,v1.multipleSelection[i].id)
                  ids[i]=v1.multipleSelection[i].id;
              }
              console.log(ids);
                axios({
                    // 请求方式
                    method: 'post',
                    url: '/product/deleteIdsjson',
                    // 传递参数 data使用流发送数据 params台servlet可以直接获取
                    data: {"ids":ids},
                    //响应的数据格式 默认就是json 可以省略
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    let res = response.data;
                    //console.log(res);
                    v1.tableData=res.list;
                    v1.count=res.total;
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                    // 一般不用
                    this.$message({
                        type: 'info',
                        message: '删除失败'
                    });
                });
            },
            selectLike(){
                obj.page=this.currentPage;
                obj.limit=this.pageSize;
                obj.productName=this.productName;
                axios({
                    // 请求方式
                    method: 'get',
                    url: '/product/json',
                    // 传递参数 data使用流发送数据 params台servlet可以直接获取
                    params: obj,
                    //响应的数据格式 默认就是json 可以省略
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    let res = response.data;
                    console.log(res);
                    v1.tableData=res.list;
                    v1.count=res.total;

                }).catch(error => {
                    // 请求失败，
                    console.log(error);
                    // 一般不用
                });
            }
        }
    })

    function getData(obj){
        //发送异步请求访问第一页数据
        axios({
            // 请求方式
            method: 'get',
            url: '/product/json',
            // 传递参数 data使用流发送数据 params台servlet可以直接获取
            params: obj,
            //响应的数据格式 默认就是json 可以省略
            responseType: 'json'
        }).then(response => {
            // 请求成功
            let res = response.data;
            console.log(res);
            v1.tableData=res.list;
            v1.count=res.total;
        }).catch(error => {
            // 请求失败，
            console.log(error);
            // 一般不用
        });
        v1.dialogEditFormVisible=false;
        v1.dialogAddFormVisible=false;
    }
    getData(obj);
</script>

</html>